<template>
  <el-tab-pane label="deployments" name="deployments">
    <el-tooltip class="box-item" effect="dark" content="刷新" placement="top">
      <el-button type="primary" size="small" @click="get_k8s_cluster_deployments(kubernetes_cluster_id_)"
        class="el-button_more_mini" icon="Refresh" />
    </el-tooltip>
    <el-button type="primary" size="small" @click="click_configuration_yaml" class="el-button_more_mini">编辑</el-button>
    <el-row style="float: right">
      <el-input style="width: 200px" v-model="pod_table_search" size="small" placeholder="搜索" />
    </el-row>
    <el-switch v-model="filter_risk_on" class="ml-2" inline-prompt
      style="--el-switch-on-color: #F56C6C; --el-switch-off-color: #909399; float: right; height: 24px; padding-right: 5px;"
      active-text="过滤风险项" inactive-text="过滤风险项" />

    <!-- <el-row style="float: right">
      <el-button type="primary" size="small" @click="filter_risk_deployments" class="el-button_more_mini">过滤风险项</el-button>
    </el-row> -->
    <el-table highlight-current-row :height="tableH" size="small" :data="filter_pod_table_search_data"
      :cell-style="{ padding: 0 }" tooltip-effect="dark" style="font-size: 10px; width: 100%"
      @selection-change="selection_deployments_table" @current-change="pitch_on_deployments_table"
      :default-sort="{ prop: 'Available', order: 'descending' }">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column show-overflow-tooltip label="服务名称" prop="name" width="400">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template v-slot="scope">
          <el-icon size="12" v-if="scope.row.status === 'True'" style="color: #67c23a">
            <el-tooltip class="box-item" effect="dark" content="健康" placement="top">
              <SuccessFilled />
            </el-tooltip>
          </el-icon>
          <el-icon size="12" v-else-if="scope.row.status === 'False'" style="color: #f56c6c">
            <el-tooltip class="box-item" effect="dark" content="不健康" placement="top">
              <CircleCloseFilled />
            </el-tooltip>
          </el-icon>
          <el-icon size="12" v-else-if="scope.row.status === 'Warning'" style="color: #E6A23C">
            <el-tooltip class="box-item" effect="dark" content="风险" placement="top">
              <WarningFilled />
            </el-tooltip>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="replicas_number" label="副本数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="namespace" label="空间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ports" label="服务端口" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Available" sortable label="更新时间" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </el-tab-pane>

  <el-dialog title="配置" v-model="configuration_yaml">
    <el-button type="primary" size="small" @click="save_configuration_yaml" class="el-button_more_mini_yaml_conf">提交</el-button>
    <CodemirrorDialog ref="CodemirrorDialogRef"/>
    <!-- <el-input v-model="configuration_yaml_textarea" :rows=textarea_rows type="textarea" placeholder="Please input" /> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import * as Request from "@/general/request";
import { ElMessage } from 'element-plus';
import CodemirrorDialog from '@/components/communal/codemirror_dialog.vue'

let pod_table_search = ref("");
let server_pod_form = ref([]);
const tableH = document.documentElement.clientHeight - 320
let kubernetes_cluster_id_ = ""
let configuration_yaml_textarea = ref("")
let configuration_yaml = ref(false)
let pitch_on_deployments_name = ""
let pitch_on_deployments_namespace = ""
const screenheight = window.innerHeight
let textarea_rows = 0
let filter_risk_on = ref(false)
if (screenheight > 150) {
  textarea_rows = Math.floor(screenheight / 35);
} else {
  textarea_rows = 2;
}

const CodemirrorDialogRef = ref<InstanceType<typeof CodemirrorDialog>>()
const code_value_change = (e: string) => {
  CodemirrorDialogRef.value?.code_value_change(e)
}

// table 搜索过滤内容
let filter_pod_table_search_data = computed(() =>
  server_pod_form.value.filter((data) => {
    let values: Array<any> = Object.values(data);
    for (var i in values) {
      if (filter_risk_on.value) {
        if (values.includes("Warning") || values.includes("False")) {
          if (values[i].includes(pod_table_search.value) || !pod_table_search.value) {
            return true;
          }
        }
      } else {
        if (values[i].includes(pod_table_search.value) || !pod_table_search.value) {
          return true;
        }
      }
    }
  }
  )
);

const get_k8s_cluster_deployments = async (kubernetes_cluster_id: string) => {
  kubernetes_cluster_id_ = kubernetes_cluster_id
  const response = await Request.GET("/background/home/kubernetes/deployments", {
    kubernetes_cluster_id: kubernetes_cluster_id,
  });
  if (response && response.data) {
    let return_data = response.data;
    if (return_data.success) {
      server_pod_form.value = return_data.data;
      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
};

// 查询configuration配置
const click_configuration_yaml = async () => {
  if (!pitch_on_deployments_name) {
    ElMessage.warning("请先选择一个服务")
  }

  const response = await Request.GET("/background/home/kubernetes/deployments_conf_yaml", {
    deployment_name: pitch_on_deployments_name,
    namespace: pitch_on_deployments_namespace,
    kubernetes_cluster_id: kubernetes_cluster_id_
  });
  if (response && response.data) {
    let return_data = response.data;
    if (return_data.success) {
      // configuration_yaml_textarea.value = return_data.data;
      code_value_change(return_data.data)
      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
  configuration_yaml.value = true
};

// 保存configuration配置
const save_configuration_yaml = async () => {
  if (!pitch_on_deployments_name) {
    ElMessage.warning("请先选择一个服务")
  }

  const response = await Request.PUT("/background/home/kubernetes/deployments_conf_yaml", {
    configuration_yaml_text: configuration_yaml_textarea.value,
    namespace: pitch_on_deployments_namespace,
    deployment_name: pitch_on_deployments_name,
    kubernetes_cluster_id: kubernetes_cluster_id_
  });
  if (response && response.data) {
    let return_data = response.data;
    if (return_data.success) {
      ElMessage.success(return_data.msg);
      configuration_yaml.value = false
    } else {
      ElMessage.error(return_data.msg);
    }
  }
  configuration_yaml.value = true
};

// 勾选
const selection_deployments_table = (e: String) => {
  console.log(e);
};

// 选中
const pitch_on_deployments_table = (e: any) => {
  if (e) {
    pitch_on_deployments_name = e.name;
    pitch_on_deployments_namespace = e.namespace
  }
};

// 将方法暴露
defineExpose({
  get_k8s_cluster_deployments
})

</script>


<style scoped>
.el-button_more_mini {
  height: 25px;
  padding: 4px 8px;
  font-size: 8px;
}

.el-button_more_mini_yaml_conf {
  height: 25px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 8px;
}
</style>